<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
  {
    style: {
      navigationBarTitleText: '宝道商贸',
  
    },
  }
  </route>
<template>
  <view class="container">
    <view class="tab-content">
      <scroll-view scroll-y class="scroll-area">
        <!-- 轮播图区域 -->
        <view class="banner">

          <swiper class="swiper-box" @change="changeSwiper" :autoplay="true" :interval="3000">
            <swiper-item v-for="(item, index) in bannerList" :key="index">
              <image :src="item.image" mode="aspectFill" class="banner-img" />
            </swiper-item>

          </swiper>
          <uni-swiper-dot :info="bannerList" :current="current" field="content" :mode="'round'" :dots-styles="{
            backgroundColor: '#999',
            selectedBackgroundColor: '#ff5555',
            selectedWidth: '20px',
          }"> </uni-swiper-dot>

        </view>

        <!-- 特惠商品区域 -->
        <view class="section">
          <view class="section-title">
            <view class="custom-tabs">
              <view v-for="(item, index) in cateList" :key="index" class="tab-item"
                :class="{ active: currentSegment === index }" @click="onSegmentChange({ currentIndex: index })">
                {{ item }}
              </view>
            </view>
          </view>
          <!-- 根据分类显示商品 -->
          <view v-if="cateList.length > 0" class="product-grid">
            <view class="product-item" v-for="(item, index) in currentProducts" :key="index" @click="goToDetail(item)">
              <image :src="item.image" mode="aspectFill" class="product-img" />
              <view class="product-info">
                <view class="product-name">{{ item.name }}</view>
                <view class="product-price">
                  <text class="price-symbol">¥</text>
                  <text class="price-value">{{ item.price }}</text>
                </view>
              </view>
            </view>
          </view>

          <view v-if="cateList.length > 0 && currentProducts.length === 0" class="no-data"> 没有数据</view>


        </view>
      </scroll-view>
    </view>

  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { getIndexAPI, getGoodsListAPI, getPosInfo2API, getCateListAPI } from '@/service/index/index'

// 定义类型接口
interface CateItem {
  id: number
  name: string
  status_text: string
}

interface CateResponse {
  code: number
  msg: string
  time: string
  data: {
    list: CateItem[]
  }
}

const current = ref(0)
const currentTab = ref('home')
const currentSegment = ref(0)

const params = ref({
  page: 1,
  limit: 6,
  total: 0,
  cat_id: 0, // 初始化为0，等待分类数据加载后更新
})

const cateList = ref<string[]>([]) // 存储分类名称数组
const cateIdList = ref<number[]>([]) // 存储分类ID数组
const currentProducts = ref([])
// 分段切换
const onSegmentChange = (e: { currentIndex: number }) => {
  currentSegment.value = e.currentIndex
  params.value.page = 1
  params.value.total = 0
  currentProducts.value = []
  // 根据选中的分类索引获取对应的分类ID
  if (cateIdList.value.length > 0 && e.currentIndex < cateIdList.value.length) {
    params.value.cat_id = cateIdList.value[e.currentIndex]
  }
  getGoodsList()
}

const bannerList = ref([

])

const specialProducts = ref([])

const normalProducts = ref([])

// 当前分类的商品列表


const getIndex = async () => {
  const res = await getIndexAPI({})
  console.log(res)
}
const getPosInfo2 = async () => {
  const res = await getPosInfo2API({})
  console.log(res)
  if (res.code === 1) {
    bannerList.value = res.data.map((item: any) => {
      return {
        image: item.img,
        content: ''
      }
    })
    console.log(bannerList.value)
  }
}

const getGoodsList = async () => {
  const res = await getGoodsListAPI(params.value)
  console.log(res)
  if (res.code === 1) {
    if (params.value.page === 1) {
      currentProducts.value = res.data.list
      params.value.total = res.data.total
    } else {
      currentProducts.value = [...currentProducts.value, ...res.data.list]
    }
  }

  console.log(res)
}

const changeSwiper = (e: any) => {
  current.value = e.detail.current
}

const switchTab = (tab: string) => {
  currentTab.value = tab
}

const goToDetail = (item: any) => {
  uni.navigateTo({
    url: `/pages/goods/detail?id=${item.id}`,
  })
}

const getCateList = async () => {
  const res = await getCateListAPI({})
  console.log('分类数据:', res)
  if (res.code === 1 && res.data && (res as CateResponse).data.list) {
    // 提取分类名称和ID
    cateList.value = (res as CateResponse).data.list.map((item: CateItem) => item.name)
    cateIdList.value = (res as CateResponse).data.list.map((item: CateItem) => item.id)

    // 如果有分类数据，设置第一个分类的ID并请求商品列表
    if (cateIdList.value.length > 0) {
      params.value.cat_id = cateIdList.value[0]
      // 获取第一个分类的商品列表
      getGoodsList()
    }
  }
}
// const onReachBottom = () => {
//   params.value.page++
//   getGoodsList()
// }
onReachBottom(() => {

  if (params.value.page * params.value.limit < params.value.total) {
    params.value.page++
    getGoodsList()
  }
})

//#ifdef APP-PLUS || MP-WEIXIN
onLoad(() => {
  getIndex()
  getCateList() // 添加分类数据获取
  getPosInfo2()
})
//#endif
//#ifdef  H5
onMounted(() => {
  getIndex()
  getCateList()
  getPosInfo2()
})
//#endif


</script>

<style>
page {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
}

.tab-content {
  flex: 1;
  overflow: hidden;
}

.scroll-area {
  height: 100%;
}

.banner {
  width: 750rpx;
  height: 400rpx;
}

.swiper-box {
  width: 100%;
  height: 100%;
}

.banner-img {
  width: 100%;
  height: 100%;
}

.section {
  padding: 20rpx;
  margin: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
}

.section-title {
  margin-bottom: 20rpx;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.custom-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.tab-item {
  flex: 0 0 calc(25% - 15rpx);
  min-width: 120rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2rpx solid transparent;
}

.tab-item.active {
  background-color: #1890ff;
  color: #ffffff;
  border-color: #1890ff;
}

.tab-item:hover {
  background-color: #1890ff;
  border-color: #1890ff;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.product-item {
  overflow: hidden;
  background: #ffffff;
  border-radius: 8rpx;
}

.product-img {
  width: 100%;
  height: 345rpx;
}

.product-info {
  padding: 16rpx;
}

.product-name {
  overflow: hidden;
  font-size: 14px;
  color: #333333;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price {
  margin-top: 8rpx;
  color: #ff5555;
}

.price-symbol {
  font-size: 12px;
}

.price-value {
  font-size: 16px;
  font-weight: bold;
}

.tab-bar {
  display: flex;
  height: 100rpx;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
}

.tab-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-text {
  margin-top: 4rpx;
  font-size: 12px;
  color: #666666;
}

.tab-item.active .tab-text {
  color: #ff5555;
}

.no-data {
  text-align: center;
  color: #999999;
  padding: 20rpx;
}
</style>
